<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-input placeholder="请输入前台用户名" v-model="selectConsumer" clearable class="handle-input"></el-input>
        <!--        添加前台用户按钮-->
        <el-button type="primary"  @click="AdddialogVisible = true">添加前台用户</el-button>
        <el-button type="danger"  @click="deleteConsumerAll">批量删除</el-button>
      </div>
    </div>
    <!--    前台用户信息表单区域-->
    <el-table :data="allConsumerTableDate" style="width: 100% " border height="600px" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column label="前台用户图片" width="110" align="center">
        <template slot-scope="scope">
          <div class="consumer-img">
            <img :src="getImgUrl(scope.row.avator)"  style="width: 100%"  />
          </div>
          <el-upload :action="uploadUrl(scope.row.id)" :before-upload="beforeConsumerAvatorUpload" :on-success="handleConsumerAvatorSuccess" >
            <el-button type="primary" size="mini" >更新图片</el-button>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="前台用户名" width="120" align="center"></el-table-column>
      <el-table-column prop="sex" label="性别" width="50" align="center">
        <template slot-scope="scope">
          {{ChangeSex(scope.row.sex)}}
        </template>
      </el-table-column>
      <el-table-column prop="phone_num" label="手机号" width="120" align="center"></el-table-column>
      <el-table-column prop="email" label="电子邮箱" width="240" align="center"></el-table-column>
      <el-table-column prop="birth" label="生日" width="120" align="center">
        <template slot-scope="scope">
          {{attachBirth(scope.row.birth)}}
        </template>
      </el-table-column>
      <el-table-column prop="introduction" label="个性签名" align="center"></el-table-column>
      <el-table-column prop="location" label="地区" width="100" align="center"></el-table-column>
      <el-table-column label="收藏" width="80" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="getCollect(scope.row.id)">收藏</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="handleEdit(scope.row)" >编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    分页功能区域-->
    <div class="PageNation">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-sizes="[5, 10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="ConsumerTableDate.length">
      </el-pagination>
    </div>

    <!--    添加前台用户对话框-->
    <el-dialog title="添加前台用户" :visible.sync="AdddialogVisible" width="420px" center >
      <!--      表单内容区域-->
      <el-form :model="AddConsumerfRuleForm" :rules="AddConsumerRules" ref="AddConsumerfRuleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="前台用户名" prop="username">
          <el-input v-model="AddConsumerfRuleForm.username"  placeholder="前台用户名"></el-input>
        </el-form-item>
        <el-form-item  label="密码" prop="password">
          <el-input v-model="AddConsumerfRuleForm.password" type="password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item label="性别" >
          <el-radio-group v-model="AddConsumerfRuleForm.sex" >
            <el-radio :label="0">女</el-radio>
            <el-radio :label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="phone_num">
          <el-input v-model="AddConsumerfRuleForm.phone_num"  手机号="密码"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="AddConsumerfRuleForm.email"  手机号="电子邮箱"></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="birth">
          <el-date-picker v-model="AddConsumerfRuleForm.birth" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
        </el-form-item>
        <el-form-item label="个性签名" prop="introduction">
          <el-input v-model="AddConsumerfRuleForm.introduction"  placeholder="个性签名"></el-input>
        </el-form-item>
        <el-form-item label="地区" prop="location">
          <el-input v-model="AddConsumerfRuleForm.location"  placeholder="地区"></el-input>
        </el-form-item>
      </el-form>
      <!--      按钮区域-->
      <span slot="footer">
        <el-button @click="AdddialogVisible = false" >取 消</el-button>
        <el-button type="primary" @click="addConsumer" >确 定</el-button>
      </span>
    </el-dialog>

    <!--    修改前台用户对话框-->
    <el-dialog title="修改前台用户信息" :visible.sync="EditdialogVisible" width="420px" center >
      <!--      表单内容区域-->
      <el-form :model="EditConsumerRuleForm" :rules="EditConsumerRuleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="前台用户名" prop="username">
        <el-input v-model="EditConsumerRuleForm.username"  placeholder="前台用户名"></el-input>
      </el-form-item>
      <el-form-item  label="密码" prop="password">
        <el-input v-model="EditConsumerRuleForm.password" type="password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item label="性别" >
        <el-radio-group v-model="EditConsumerRuleForm.sex" >
          <el-radio :label="0">女</el-radio>
          <el-radio :label="1">男</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号" prop="phone_num">
        <el-input v-model="EditConsumerRuleForm.phone_num"  手机号="密码"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input v-model="EditConsumerRuleForm.email"  手机号="电子邮箱"></el-input>
      </el-form-item>
      <el-form-item label="生日" prop="birth">
        <el-date-picker v-model="EditConsumerRuleForm.birth" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
      </el-form-item>
      <el-form-item label="简介" prop="introduction">
        <el-input v-model="EditConsumerRuleForm.introduction"  placeholder="个性签名"></el-input>
      </el-form-item>
      <el-form-item label="地区" prop="location">
        <el-input v-model="EditConsumerRuleForm.location"  placeholder="地区"></el-input>
      </el-form-item>
      </el-form>
      <!--      按钮区域-->
      <span slot="footer">
        <el-button @click="EditdialogVisible = false" >取 消</el-button>
        <el-button type="primary" @click="editConsumer" >确 定</el-button>
      </span>
    </el-dialog>

    <!--    删除对话框-->
    <el-dialog title="提示" :visible.sync="DeleteVisible" width="30%" >
      <div align="center">
        <span>是否确定删除</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="DeleteVisible = false">取 消</el-button>
        <el-button size="mini" type="danger" @click="DelteConsumerRow">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {delteConsumer, getAllConsumer, setConsumer, updateConsumer} from "../api";
import {mixin} from "../mixinx";

export default {
  name: "Consumer",
  mixins: [mixin],
  data() {
    return {
      AdddialogVisible: false,
      EditdialogVisible:false,
      DeleteVisible:false ,
      AddConsumerfRuleForm: {
        username: '',
        password:'',
        sex:0,
        phone_num:'',
        email:'',
        birth:'',
        introduction:'',
        location:'',
      },
      EditConsumerRuleForm:{
        id:'',
        username: '',
        password:'',
        sex:'',
        phone_num:'',
        email:'',
        birth:'',
        introduction:'',
        location:'',
      },
      AddConsumerRules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        phone_num: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
        ],
        email: [
          {required: true, message: '请输入电子邮箱', trigger: 'blur'},
          {type:'email' ,message: '请输入正确的电子邮箱格式', trigger: '[blur,change]'}
        ],
        introduction: [
          {required: true, message: '请输入个性签名', trigger: 'blur'},
        ],
        location: [
          {required: true, message: '请输入地区', trigger: 'blur'},
        ],
      },
      EditingerRules: {
        name: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
      },
      ConsumerTableDate:[],
      tempDate:[],
      selectConsumer:'',
      pageSize:5,         //当前分页大小
      currentPage:1,      //当前页面
      idx:-1,       //当前选择项id
      multipleSelection:[],  //表格的多选项
    }
  },
  watch:{
    // 监听搜索前台用户信息框，随输入文字变化
    selectConsumer: function(){
      if(this.selectConsumer == ''){
        this.ConsumerTableDate = this.tempDate;
      }else{
        this.ConsumerTableDate = [];
        for(let item of this.tempDate){
          if(item.username.includes(this.selectConsumer)){
            this.ConsumerTableDate.push(item);
          }
        }
      }
    }
  },
  computed:{
    // 计算当前前台用户表里的所有前台用户数据
    allConsumerTableDate(){
      return this.ConsumerTableDate.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
    }
  },
  created() {
    this.getConsumerDate()
  },

  methods: {
    // 查询所有前台用户
    getConsumerDate(){
      this.tempDate=[]
      this.ConsumerTableDate=[]
      getAllConsumer().then(res=>{
        this.tempDate=res
        this.ConsumerTableDate=res
        this.currentPage=1
      })
    },
    // 添加前台用户事件
    addConsumer(){
      // 添加前的表单校验
      this.$refs['AddConsumerfRuleForm'].validate(valid =>{
        if(valid){
          let d=this.AddConsumerfRuleForm.birth
          let datetime=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()
          let params=new URLSearchParams()
          params.append('username',this.AddConsumerfRuleForm.username)
          params.append('password',this.AddConsumerfRuleForm.password)
          params.append('sex',this.AddConsumerfRuleForm.sex)
          params.append('phone_num',this.AddConsumerfRuleForm.phone_num)
          params.append('email',this.AddConsumerfRuleForm.email)
          params.append('birth',datetime)
          params.append('introduction',this.AddConsumerfRuleForm.introduction)
          params.append('location',this.AddConsumerfRuleForm.location)
          params.append('avator','/avatorImage/user.jpg')
          setConsumer(params).then(res =>{
            console.log(res)
            if(res.code==1){
              this.getConsumerDate()
              this.$message({
                showClose: true,
                message: '添加成功',
                type: 'success'
              });
            }else {
              this.$message({
                showClose: true,
                message: '添加失败',
                type: 'error'
              });
            }
          }).catch(err =>{
            console.log(err)
          })
          this.AdddialogVisible=false

        }
      })

    },
    // 把当前要修改的前台用户信息id传入修改对话框
    handleEdit(row){
      this.EditdialogVisible=true
      this.EditConsumerRuleForm={
        id:row.id,
        username: row.username,
        password:row.password,
        sex:row.sex,
        phone_num:row.phone_num,
        email:row.email,
        birth:row.birth,
        introduction:row.introduction,
        location:row.location,
      }
    },
    // 修改前台用户信息
    editConsumer(){
      let d=new Date(this.EditConsumerRuleForm.birth)
      let datetime=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()
      let params=new URLSearchParams()
      params.append('id',this.EditConsumerRuleForm.id);
      params.append('username',this.EditConsumerRuleForm.username)
      params.append('password',this.EditConsumerRuleForm.password)
      params.append('sex',this.EditConsumerRuleForm.sex)
      params.append('phone_num',this.EditConsumerRuleForm.phone_num)
      params.append('email',this.EditConsumerRuleForm.email)
      params.append('birth',datetime)
      params.append('introduction',this.EditConsumerRuleForm.introduction)
      params.append('location',this.EditConsumerRuleForm.location)
      updateConsumer(params).then(res =>{
        console.log(res)
        if(res.code==1){
          this.getConsumerDate()
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success'
          });
        }else {
          this.$message({
            showClose: true,
            message: '修改失败',
            type: 'error'
          });
        }
      }).catch(err =>{
        console.log(err)
      })
      this.EditdialogVisible=false
    },
    // 确定删除前台用户
    DelteConsumerRow(){
      delteConsumer(this.idx).then(res =>{
        if(res){
          this.getConsumerDate()
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          });
        }else {
          this.$message({
            showClose: true,
            message: '删除失败',
            type: 'error'
          });
        }
      })
      this.DeleteVisible=false
    },
    // 更新图片
    uploadUrl(id){
      return `${this.$store.state.HOST}/consumer/updateConsumerPic?id=${id}`
    },
    // 获取当前页
    handleCurrentChange(val){
      this.currentPage=val
    },
    // 当前页的显示大小
    handleSizeChange(val){
      this.pageSize=val
    },
    // 跳转到收藏页面
    getCollect(id){
      this.$router.push({path:'/Collect',query:{id}})
    }
  }
}
</script>

<style scoped>
.handle-box{
  margin-bottom: 20px;
}
.consumer-img{
  width: 100%;
  height: 80px;
  border-radius: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}
.handle-input{
  width: 300px;
  display: inline-block;
}
.PageNation{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>



























